<template>
  <div class="container">
    <!-- 顶部搜索框模块 -->
    <div class="form-group">
      <div class="input-group">
        <h4>品牌管理</h4>
      </div>
    </div>

    <!-- 数据表格 -->
    <table class="table table-bordered table-hover mt-2">
      <thead>
        <tr>
          <th>编号</th>
          <th>资产名称</th>
          <th>价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="list.length>0">
        <tr v-for="(item, index) in list" :key="item">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <!-- 如果价格超过100，就有red这个类 -->
          <td :class="item.price>100 ? 'red': ''">{{ item.price }}</td>
          <td>{{ dataFormater(item.time) }}</td>
          <td><a href="#" @click="del(item.id)">删除</a></td>
        </tr>
        <tr style="background-color: #eee">
          <td>统计:</td>
          <td colspan="2">总价钱为: {{total}}</td>
          <td colspan="2">平均价: {{pingjun}}</td>
        </tr>
      </tbody>
      <tfoot v-if="(list.length ===0)">
        <tr>
          <td colspan="5" style="text-align: center">暂无数据</td>
        </tr>
      </tfoot>
    </table>

    <!-- 添加资产 -->
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="资产名称" v-model.trim="name"/>
        </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="价格" v-model.number="price"/>
        </div>
      </div>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <!-- 阻止表单提交 -->
      <button class="btn btn-primary" @click.prevent="add">添加资产</button>
    </form>
  </div>
</template>

<script>
import dayjs from "dayjs"
export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('input'))||[],
      name:'',
      price:''
    }
  },
  methods: {
    dataFormater(date) {
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
    },
    del(id){
      return this.list = this.list.filter(item => item.id !== id)
    },
    add(){
      if(this.name==='' && this.price===''){
       return alert('内容不饿能为空')
      }
      this.list.push({
        id: +new Date(),
        name:this.name,
        price:this.price,
        time:new Date(),
      })
      this.price = this.name = ""
    }
  },
  computed:{
    total(){
      return this.list.reduce((prev,item)=>prev+item.price,0)
    },
    pingjun(){
      return this.total / this.list.length
    }
  },
  watch:{
    list(val){
      console.log(val)
      localStorage.setItem('input',JSON.stringify(this.list))
    }
  }
}
</script>

<style>
.red {
  color: red;
}
</style>
